<template>
	<view class="main">
		<navBar title="卡券管理"></navBar>
		<u-tabs v-if="openType == 1" :list="list" :current="current" bg-color="transparent" active-color="#FF9500"
			:is-scroll="false" @change="changeTab"></u-tabs>
		<view class="open-hint" v-if="false">
			<view class="left">
				<u-icon name='volume-up' color="#FF9500"></u-icon>
				<text>开启临期提醒，省钱不错过～</text>
			</view>
			<view class="btn">开启提醒</view>
		</view>
		<view class="list" v-if="coupons.length">
			<coupon-item v-for="(item, index) in coupons" @openCode="openCode" :invalid="current !== 0" :key="index"
				:info="item" @clickBtn="useCoupon" :isSelect="openType == 2" :selected="item.id === couponId"
				@select="selectCoupon(item)"></coupon-item>
		</view>
		<view class="null-data">暂无优惠券~</view>
		<exchange :value.sync="showExchange" :info="couponInfo" @click="exchange"></exchange>
		<codePopup :src="codeSrc" :value.sync="showCode"></codePopup>
	</view>
</template>

<script>
	import couponItem from './components/coupon-item.vue'
	import exchange from './components/exchange.vue'
	import codePopup from "@/components/code-popup.vue"
	import {
		onwCouponListApi,
		exchangeCouponApi,
		ownCouponListByProductApi
	} from '@/api/coupon.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
						name: '未使用',
						type: 1
					},
					{
						name: '已使用',
						type: 3
					},
					{
						name: '已失效',
						type: 2
					}
				],
				coupons: [],
				showExchange: false,
				couponInfo: {},
				showCode: false,
				codeSrc: "",
				openType: 1,
				couponId: 0,
				eventChannel: null,
				productIds: ''
			}
		},
		components: {
			couponItem,
			exchange,
			codePopup
		},
		onLoad(opt) {
			this.openType = opt.openType || 1
			this.couponId = opt.couponId || 0
			this.productIds = opt.productIds || ''
			this.eventChannel = this.getOpenerEventChannel()
			this.getList()
		},
		methods: {
			changeTab(index) {
				this.current = index
				this.getList()
			},
			useCoupon(data) {
				if (data.coupon_type === 2) {
					this.couponInfo = data;
					this.showExchange = true
				} else {

					this.$bus.$emit('changeTab', 2)
					uni.switchTab({
						url: '/pages/tabs/index/index',
						fail: (err) => {
							console.log(err);
						}
					})
				}
			},
			selectCoupon(item) {
				this.couponId = item.id
				this.eventChannel.emit('acceptDataFromOpenedPage', item)
				uni.navigateBack({
					delta: 1,
				})
			},
			openCode(item) {
				this.codeSrc = item.qr_code_resource
				this.showCode = true
			},
			getList() {
				this.coupons = []
				if (this.openType == 2) {
					ownCouponListByProductApi({
						goods_id: this.productIds
					}).then(res => {
						this.coupons = res.data.list || []
					})
				} else {
					onwCouponListApi({
						status: this.list[this.current].type
					}).then(res => {
						if (res.code === 200) {
							this.coupons = res.data
						}
					})
				}
			},
			exchange(data) {
				exchangeCouponApi({
					num: data.num,
					my_coupon_id: data.id
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '兑换成功'
						})
						let index = this.coupons.findIndex(item => item.coupon_id === data.coupon_id)
						this.coupons[index].wait_coupon_num -= 1
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		background-color: #EEEFF0;
	}

	.list {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.open-hint {
		background-color: #FFEDDC;
		padding: 12rpx 36rpx;
		@extend .flex-btw;
		font-size: 24rpx;

		.left {
			color: #FF9500;
		}

		.btn {
			padding: 12rpx;
			background-color: #FF9500;
			color: #FFF;
			border-radius: 6rpx;
		}
	}

	.null-data {
		text-align: center;
		margin-top: 60rpx;
		font-size: 32rpx;
		color: #a2a2a2;
	}
</style>
